<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            color: red;
        }
    </style>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <aki v-model:page="page" v-model:page-size="pageSize" :total="total"></aki>
        <hr>
        <p>
            当前页：{{page}}<br>
            每页显示条数：{{pageSize}}<br>
            总条数：{{total}}<br>
        </p>
    </div>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    page: 1,
                    pageSize: 2,
                    total: 20,
                }
            }
        });

        app.component('Aki', {
            props:{
                page: Number,
                pageSize: Number,
                total: Number,
            },
            data(){
                return{
                    current:this.page,
                    perpage:this.pageSize,
                }
            },
            computed:{
                totalPage(){
                    return Math.ceil(this.total/this.perpage);
                }
            },
            watch:{
                current(val){
                    this.$emit('update:page', val);
                },
                perpage(val){
                    if(this.current >= this.totalPage) this.current = this.totalPage;
                    this.$emit('update:pageSize', val);
                }
            },
            template:`
            <p>
            <button @click="current--" :disabled="current <= 1">上一页></button>
            <button v-for=" p in totalPage" :class="{active: p === current}" @click="current=p">{{p}}</button>
            <button @click="current++" :disabled="current >= totalPage">下一页></button>     
            <select v-model.number="perpage">
                <option value="2">每页2条</option>
                <option value="4">每页4条</option>
                <option value="5">每页5条</option>
            </select>
            </p>
            `
        })

        const vm = app.mount('#app');
    </script>
</body>
</html>